import { getBannerAPI } from '@/apis/home'
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { getTopCategoryAPI } from '@/apis/category';

export const useCategory = ()=>{
  const category = ref({})
  const route = useRoute()
  const getCategory = async (id) => {
    const res = await getTopCategoryAPI(id)
    // console.log(res)
    category.value = res.result
  }
  onMounted(() => getCategory(route.params.id))

  onBeforeRouteUpdate((to) => {
    // to: 要去哪个页面组件对应的路由对象
    // from: 当前页面组件对应的路由对象
    // console.log('路由地址变化了', to.params.id)
    getCategory(to.params.id)
  })

  return {
    category
  }

}

export const useBanner = () => {
  const bannerList = ref([])
  const getBanner = async () => {
    const res = await getBannerAPI(2)
    bannerList.value = res.result
  }
  onMounted(() => getBanner())

  return {
    bannerList
  }
}